<template>
  <div> 
    <div ref="blockT" >
      <mt-header fixed title="团体赛报名">
        <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
      </mt-header>
      <div style="height:40px;"></div>
      <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
      <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>   
      <step current=3 :stepArr="stepArr"></step>
      <div class="cf p10">
        <span class="fl f16 fwb mt5">选择队员</span>
        <span class="fl f16 mt5"> (8-10人)</span>
        <span class="fr">
          <mt-button @click="addMember" plain class="mr10" size="small" type="danger"><i class="fa fa-plus"></i> 添加队员</mt-button> 
          <mt-button @click="popupVisible = true" size="small" type="primary">选择队员</mt-button> 
        </span>
      </div>
    </div>
    <div class="team-content" style="overflow: auto;" ref="listContent">
      <ul class="team-list">
        <li v-for="(item, index) in list">            
          <div class="team-item-num"><i>{{index + 1}}</i></div>
          <div class="team-item-in">
            <div class="team-item-in-line">
              <div class="team-item-c">
                <popup-radio style="flex:1; width: 0;" v-model="item.certType" :options='certList' title="证件类型"></popup-radio>
                <input style="flex:1;" type="text" v-model="item.certNo" placeholder="证件号码"> 
              </div>
              <div class="team-item-c">
                <input style="flex:1;" type="text" v-model="item.name" placeholder="姓名">
                <popup-radio style="flex:1;" title="衣码" v-model="item.sex" :options="sexArr"></popup-radio>
                <input style="flex:2;" type="text" v-model="item.mobile" placeholder="手机号">   
              </div>
              <div class="team-item-c">  
                <popup-age style="flex:1;" title="年龄" v-model="item.age"></popup-age>
                <popup-radio style="flex:1;" title="性别" v-model="item.sex" :options="sexArr"></popup-radio>
                <i style="flex:1; background:#26a2ff; color:#fff;" @click=" " class="team-gray-btn">验证</i>
                <i style="flex:1;" class="tc red">未注册</i>
              </div>
            </div>
          </div>
          <div style="background:#ddd; color:#000; display: flex; align-items: center;" @click="removeMember(index)">
            <div style="padding:7px;">删<br>除</div> 
          </div> 
        </li>
      </ul>
    </div> 
    <div ref="blockB">
      <div style="display: flex; padding: 10px;">     
        <mt-button style="flex:1;" class="mr10" @click='$router.push("/enroll/group/step2")' plain type="primary">上一步</mt-button>  
        <mt-button style="flex:1;" @click='$router.push("/enroll/group/step4")'  type="primary">下一步</mt-button>
      </div>
    </div>

    <mt-popup v-model="popupVisible" modal=false style="width:100%; height:100%;">
      <div class="pop-page">
        <div class="pop-page-title"><i class="pop-page-title-side fa fa-remove" @click="popupVisible = false"></i><i class="pop-page-title-center">选择队员</i><i class="pop-page-title-side"></i></div>
        <div class="pop-page-content">
          <mt-checklist v-model="memberSel" align="right" :options="memberList"></mt-checklist> 
        </div>
        <div class="pop-page-bottom"><i class="gray6" @click="popupVisible = false">取消</i><i class="blue" @click="popupVisible = false">确定</i></div>
      </div>
    </mt-popup>


  </div>
</template>

<script>
import step from '@/components/step'
import popupAge from '@/components/popupAge'
import popupRadio from '@/components/popupRadio'
export default {
  components:{
    step,popupAge,popupRadio
  },
  data () {
    return {
      stepArr:['选择俱乐部','队伍信息','选择队员','报名预览','支付完成'],
      certList:[{value:"1",name:"身份证"},{value:"2",name:"学生证"},{value:"3",name:"港澳通行证"},{value:"4",name:"护照"}],
      sexArr:[{value:'male',name:'男'},{value:'female',name:'女'}],
      list:[
         {reg:true},
         {},
         {},
         {}
      ],
      popupVisible:false, 
      memberList:[
        { 
          "value":1, 
          "label":"独孤求败"
        },
        { 
          "value":2, 
          "label":"张无忌"
        },
        { 
          "value":3, 
          "label":"李小龙"
        },
        { 
          "value":4, 
          "label":"迈克杰克逊"
        },
        { 
          "value":5, 
          "label":"东方不败"
        }, 
        { 
          "value":6, 
          "label":"灭绝师太"
        }, 
        { 
          "value":7, 
          "label":"天山童姥"
        }, 
        { 
          "value":8, 
          "label":"赤练仙子"
        }, 
        { 
          "value":9, 
          "label":"桃花岛主"
        }, 
        { 
          "value":10, 
          "label":"五毒教主"
        }
      ],
      memberSel:[]
    }
  },
  mounted(){ 
    this.$refs.listContent.style.maxHeight = document.documentElement.clientHeight - this.$refs.blockT.offsetHeight - this.$refs.blockB.offsetHeight + "px";

  },
  methods:{
    addMember(){
      this.list.push({});
      var that = this;
      setTimeout(function(){
        that.$refs.listContent.scrollTop  = "999999999";
      },100)
    },
    removeMember(i){
      this.list.splice(i,1);
    },
    selMember(){

    }
  }
}
</script>
